<template>
  <div>
    <navbar></navbar>

    <!-- 标题 -->
    <div class="n_title">
      <span class="t_text">新闻</span>
      <div class="t_conten">
        <img src="@/assets/news/block_l.png" alt />
        <span class="text">揭密第一手新闻资料</span>
        <img src="@/assets/news/block_r.png" alt />
      </div>
    </div>

    <!-- 内容 -->
    <div class="main">
      <div class="m_l m_style">
        <div class="l_content" @click="newsdetail(item.id)" v-for="item in newsDate" :key="item.id">
          <img :src="item.src" alt />

          <div class="content">
            <h3>
              <a href="#">{{item.title}}</a>
            </h3>
            <div>{{item.date}}</div>
            <p>{{item.content}}</p>
          </div>
        </div>
      </div>
      <div class="m_r m_style">
        <div class="about">
          <div class="title">相关分类</div>
          <div class="tag">
            <el-tag>
              <a href="#">新闻</a>
            </el-tag>
            <el-tag>
              <a href="#">猫</a>
            </el-tag>
            <el-tag>
              <a href="#">铲屎官</a>
            </el-tag>
            <el-tag>
              <a href="#">知识</a>
            </el-tag>
            <el-tag>
              <a href="#">寄养</a>
            </el-tag>
            <el-tag>
              <a href="#">吃喝拉撒</a>
            </el-tag>
          </div>
        </div>
        <div class="read">
          <div class="title">推荐阅读</div>
          <div class="content" v-for="item in readData" :key="item.id">
            <h3>
              <a href="#">{{item.title}}</a>
            </h3>
            <div class="img">
              <img :src="item.img" alt />
              <p class="text">{{item.text}}</p>
            </div>
          </div>
        </div>
        <div class="theme">
          <div class="title">最新主题</div>
          <div class="text" v-for="item in themeData" :key="item.id">
            <p>
              <a href="#">{{item.text}}</a>
            </p>
          </div>
        </div>
        <div class="banner">
          <div v-for="item in imgData" :key="item.id">
            <el-image :src="item.src"></el-image>
          </div>
        </div>
      </div>
    </div>

    <!-- 回到顶部 -->
    <div>
      <el-backtop class=".page-component__scroll .el-scrollbar__wrap" :bottom="100" :right="200">
        <div
          style="
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      "
        >UP</div>
      </el-backtop>
    </div>
  </div>
</template>

<script>
import navbar from '../../components/navbar'
export default {
  data() {
    return {
      newsDate: [
        {
          id: '1',
          title: '第六届京宠展倒计时10天12大展馆展位图,你值得拥有!',
          date: '2019-3-4 22:32',
          src: '',
          content:
            '第六届北京国际宠物用品展览会(简称：雄鹰京宠展)将于3月14-17日在中国国际展览中心(老馆)盛大召开!千万别错过!错过要等~等 ~等一年!今年雄鹰京宠展参展商数量超过800家，展示面积达70000平米 ...'
        },
        {
          id: '2',
          title: '第六届京宠展倒计时10天12大展馆展位图,你值得拥有!',
          date: '2019-3-4 22:32',
          src: '',
          content:
            '第六届北京国际宠物用品展览会(简称：雄鹰京宠展)将于3月14-17日在中国国际展览中心(老馆)盛大召开!千万别错过!错过要等~等 ~等一年!今年雄鹰京宠展参展商数量超过800家，展示面积达70000平米 ...'
        },
        {
          id: '3',
          title: '第六届京宠展倒计时10天12大展馆展位图,你值得拥有!',
          date: '2019-3-4 22:32',
          src: '',
          content:
            '第六届北京国际宠物用品展览会(简称：雄鹰京宠展)将于3月14-17日在中国国际展览中心(老馆)盛大召开!千万别错过!错过要等~等 ~等一年!今年雄鹰京宠展参展商数量超过800家，展示面积达70000平米 ...'
        },
        {
          id: '4',
          title: '第六届京宠展倒计时10天12大展馆展位图,你值得拥有!',
          date: '2019-3-4 22:32',
          src:
            'http://www.petly.net/data/attachment/portal/201608/24/052141lhk88z7tu8trcv89.jpeg.thumb.jpg',
          content:
            '第六届北京国际宠物用品展览会(简称：雄鹰京宠展)将于3月14-17日在中国国际展览中心(老馆)盛大召开!千万别错过!错过要等~等 ~等一年!今年雄鹰京宠展参展商数量超过800家，展示面积达70000平米 ...'
        },
        {
          id: '5',
          title: '第六届京宠展倒计时10天12大展馆展位图,你值得拥有!',
          date: '2019-3-4 22:32',
          src:
            'http://www.petly.net/data/attachment/portal/201607/29/060828tufqtwyn6hjq2ctz.jpg.thumb.jpg',
          content:
            '第六届北京国际宠物用品展览会(简称：雄鹰京宠展)将于3月14-17日在中国国际展览中心(老馆)盛大召开!千万别错过!错过要等~等 ~等一年!今年雄鹰京宠展参展商数量超过800家，展示面积达70000平米 ...'
        }
      ],
      readData: [
        {
          id: '1',
          title: '当残疾动物装上3D打印假肢 其它动物都哭了',
          img:
            'http://www.petly.net/data/attachment/block/63/63cca7ed99e192b2c9d2e10dcc42d529.jpg',
          text:
            '人们经常过度的关心自身，而忽略了与人类共同生活在地球上动物们，其实他们和人类一样拥有自己的...'
        },
        {
          id: '2',
          title: '一对流浪狗露宿街头 互相拥抱相依为伴',
          img:
            'http://www.petly.net/data/attachment/block/97/972a2c347f8a1ec1440699a15beaed7d.jpg',
          text:
            '一对流浪露宿街头，一起相依为命的狗狗！小黄狗，虽然自己也还小，但是全心全力的保护比它更小的...'
        }
      ],
      themeData: [
        {
          id: '1',
          text: '北京想收养一只萨摩耶或者金毛拉布拉多'
        },
        {
          id: '2',
          text: '北京常驻.全家同意.想领养一只狗狗.支持回'
        },
        {
          id: '3',
          text: '家有成年好看狸花弟弟，求江苏新家；QQ：53646453'
        }
      ],
      imgData: [
        {
          id: '1',
          src:
            'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        },
        { id: '2', src: 'http://www.petly.net/template/petly/src/a8.jpg' },
        { id: '3', src: 'http://www.petly.net/template/petly/src/a8.jpg' },
        {
          id: '4',
          src:
            'http://www.petly.net/data/attachment/portal/201606/21/080810x8748mut4bxs85m7.jpg.thumb.jpg'
        }
      ]
    }
  },
  methods: {
    newsdetail(index){
      this.$router.push('newsdetail' + "?id=" + 2)
    }
  },
  components: {
    navbar
  }
}
</script>

<style lang="less" scoped>
.page-component__scroll {
  height: 100%;
}
.page-component__scroll .el-scrollbar__wrap {
  overflow-x: auto;
}
a {
  color: #444;
  text-decoration: none;
}
.n_title {
  width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  .t_text {
    font-size: 26px;
    color: #666;
    margin-right: 20px;
  }
  .t_content {
    .text {
      font-size: 16px;
      color: #666;
    }
  }
}
.main {
  width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 40px;
  .m_style {
    background: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 0 4px #ececec;
    padding: 15px 25px;
    box-sizing: border-box;
  }
  .m_l {
    width: 70%;
    .l_content {
      border-bottom: 1px solid #eeeeee;
      padding-bottom: 25px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      img {
        max-width: 265px;
        max-height: 170px;
        padding-right: 20px;
        box-sizing: border-box;
      }

      .content {
        h3 {
          a {
            color: #444;
            &:hover {
              color: #00aa98;
              text-decoration: underline;
            }
          }
        }
        div {
          color: #afafaf;
          font-size: 14px;
          margin-top: 10px;
        }
        p {
          color: #777;
          font-size: 12px;
          line-height: 22px;
          margin-top: 10px;
        }
      }
    }
  }
  .m_r {
    width: 28%;
    padding: 0px 20px;
    > div {
      margin-top: 30px;
    }
    .title {
      font-size: 20px;
      color: #333;
      padding-bottom: 20px;
      border-bottom: 1px solid #eeeeee;
    }
    .about {
      .tag {
        margin: 20px 0;
        display: flex;
        flex-wrap: wrap;
        font-size: 14px;
        .el-tag {
          width: 70px;
          text-align: center;
          background-color: #7abefd;
          border: none;
          margin-right: 15px;
          margin-bottom: 10px;
          a {
            color: #fff;
            text-decoration: none;
          }
        }
      }
    }
    .read {
      .content {
        h3 {
          font-size: 15px;
          color: #444;
          > a:hover {
            text-decoration: underline;
          }
        }
        .img {
          display: flex;
          img {
            width: 90px;
            height: 90px;
            vertical-align: middle;
            margin-right: 10px;
          }
          .text {
            font-size: 14px;
            text-indent: 20px;
            line-height: 24px;
            color: #8c8c8c;
          }
        }
      }
    }
    .theme {
      .text {
        p > a {
          &:hover {
            text-decoration: underline;
          }
          display: inline-block;
          width: 260px;
          line-height: 40px;
          height: 40px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #333333;
          font-size: 14px;
        }
      }
    }
    .banner {
      .el-image {
        margin-bottom: 20px;
      }
    }
  }
}
</style>